<template>
  <div class="modern-layout">
    <!-- 现代化侧边栏 -->
    <aside class="modern-sidebar">
      <div class="sidebar-brand">
        <div class="brand-icon">
          <el-icon><Monitor /></el-icon>
        </div>
        <div class="brand-text">
          <h2>工单系统</h2>
          <span class="brand-subtitle">Ticket Management</span>
        </div>
      </div>
      
      <nav class="sidebar-nav">
        <div class="nav-group">
          <div class="nav-group-title">核心功能</div>
          <div class="nav-items">
            <!-- 提交工单导航项已移除 -->
            
            <div class="nav-item" @click="goToList">
              <div class="nav-icon">
                <el-icon><List /></el-icon>
              </div>
              <span class="nav-text">工单列表</span>
              <div class="nav-count">{{ stats.totalTickets }}</div>
            </div>
            
            <div class="nav-item" @click="goToDetail">
              <div class="nav-icon">
                <el-icon><Document /></el-icon>
              </div>
              <span class="nav-text">工单详情</span>
            </div>
          </div>
        </div>
        
        <div class="nav-group">
          <div class="nav-group-title">数据分析</div>
          <div class="nav-items">
            <div class="nav-item">
              <div class="nav-icon">
                <el-icon><TrendCharts /></el-icon>
              </div>
              <span class="nav-text">统计报表</span>
            </div>
            
            <div class="nav-item">
              <div class="nav-icon">
                <el-icon><DataAnalysis /></el-icon>
              </div>
              <span class="nav-text">性能分析</span>
            </div>
          </div>
        </div>
      </nav>
      
      <div class="sidebar-footer">
        <div class="user-card">
          <div class="user-avatar">
            <el-icon><User /></el-icon>
          </div>
          <div class="user-info">
            <div class="user-name">管理员</div>
            <div class="user-role">系统管理员</div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 主内容区域 -->
    <main class="main-container">
      <!-- 顶部导航栏 -->
      <header class="top-header">
        <div class="header-left">
          <div class="breadcrumb">
            <el-icon><House /></el-icon>
            <span>首页</span>
            <el-icon><ArrowRight /></el-icon>
            <span>功能演示</span>
          </div>
        </div>
        
        <div class="header-right">
          <!-- 新建工单按钮已移除 -->
        </div>
      </header>

      <!-- 欢迎区域 -->
      <section class="welcome-section">
        <div class="welcome-content">
          <h1 class="welcome-title">欢迎使用工单管理系统</h1>
          <p class="welcome-subtitle">基于Vue 3 + Spring Boot构建的现代化工单管理平台</p>
        </div>
      </section>

      <!-- 统计卡片网格 -->
      <section class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon total">
            <el-icon><Document /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.totalTickets }}</div>
            <div class="stat-label">总工单数</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon pending">
            <el-icon><Clock /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.pendingTickets }}</div>
            <div class="stat-label">待处理</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon progress">
            <el-icon><Loading /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.inProgressTickets }}</div>
            <div class="stat-label">处理中</div>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon resolved">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <div class="stat-number">{{ stats.resolvedTickets }}</div>
            <div class="stat-label">已解决</div>
          </div>
        </div>
      </section>

      <!-- 功能特色展示 -->
      <section class="features-section">
        <div class="section-header">
          <h2>核心功能特色</h2>
          <p>现代化的工单管理解决方案</p>
        </div>
        
        <div class="features-grid">
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><User /></el-icon>
            </div>
            <div class="feature-content">
              <h3>角色权限管理</h3>
              <p>支持客户、技术支持、管理员三种角色，不同权限访问不同功能</p>
              <el-tag type="info" size="small">权限控制</el-tag>
            </div>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Share /></el-icon>
            </div>
            <div class="feature-content">
              <h3>工单分配流转</h3>
              <p>支持单个和批量指派工单给技术人员，完整的处理记录追踪</p>
              <el-tag type="success" size="small">智能分配</el-tag>
            </div>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Search /></el-icon>
            </div>
            <div class="feature-content">
              <h3>智能搜索筛选</h3>
              <p>支持按标题、状态、优先级、分类等多维度筛选，快速定位工单</p>
              <el-tag type="primary" size="small">高效检索</el-tag>
            </div>
          </div>
          
          <div class="feature-card">
            <div class="feature-icon">
              <el-icon><Moon /></el-icon>
            </div>
            <div class="feature-content">
              <h3>主题切换</h3>
              <p>支持亮色/暗色主题切换，适应不同使用环境和用户偏好</p>
              <el-tag type="warning" size="small">个性化</el-tag>
            </div>
          </div>
        </div>
      </section>

      <!-- 快速操作面板 -->
      <section class="actions-section">
        <div class="section-header">
          <h2>快速操作</h2>
          <p>常用功能一键直达</p>
        </div>
        
        <div class="actions-grid">
          <el-button type="primary" size="large" @click="createSampleTicket" class="action-btn">
            <el-icon><Plus /></el-icon>
            创建示例工单
          </el-button>
          
          <el-button type="success" size="large" @click="assignRandomTickets" class="action-btn">
            <el-icon><User /></el-icon>
            随机分配工单
          </el-button>
          
          <el-button type="warning" size="large" @click="updateRandomStatus" class="action-btn">
            <el-icon><Refresh /></el-icon>
            更新工单状态
          </el-button>
          
          <el-button type="info" size="large" @click="refreshStats" class="action-btn">
            <el-icon><RefreshRight /></el-icon>
            刷新统计数据
          </el-button>
        </div>
      </section>

      <!-- 使用说明 -->
      <section class="instructions-section">
        <div class="section-header">
          <h2>使用说明</h2>
          <p>了解工单处理流程</p>
        </div>
        
        <div class="steps-container">
          <el-steps :active="currentStep" finish-status="success" align-center>
            <el-step title="提交工单" description="客户填写问题描述并提交" />
            <el-step title="工单分配" description="管理员或技术支持分配工单" />
            <el-step title="处理工单" description="技术人员处理并更新状态" />
            <el-step title="完成工单" description="问题解决，工单关闭" />
          </el-steps>
          
          <div class="step-content">
            <el-alert
              :title="stepInstructions[currentStep].title"
              :description="stepInstructions[currentStep].description"
              :type="stepInstructions[currentStep].type"
              show-icon
              :closable="false"
            />
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useTicketsStore } from '../store/tickets'
import { ElMessage } from 'element-plus'

export default {
  name: 'Demo',
  setup() {
    const router = useRouter()
    const ticketsStore = useTicketsStore()
    
    const currentStep = ref(0)
    
    const stats = computed(() => ({
      totalTickets: ticketsStore.tickets.length,
      pendingTickets: ticketsStore.tickets.filter(t => t.status === 'pending').length,
      inProgressTickets: ticketsStore.tickets.filter(t => t.status === 'in_progress').length,
      resolvedTickets: ticketsStore.tickets.filter(t => t.status === 'resolved').length
    }))
    
    const stepInstructions = ref([
      {
        title: '提交工单',
        description: '客户可以通过工单系统提交问题，填写详细的问题描述和相关信息。',
        type: 'info'
      },
      {
        title: '工单分配',
        description: '管理员或技术支持人员可以将工单分配给相应的技术人员进行处理。',
        type: 'warning'
      },
      {
        title: '处理工单',
        description: '技术人员接收工单后，开始处理问题并定期更新工单状态。',
        type: 'success'
      },
      {
        title: '完成工单',
        description: '问题解决后，工单状态更新为已完成，整个流程结束。',
        type: 'success'
      }
    ])
    
    const goToList = () => {
      router.push('/tickets')
    }
    
    const goToDetail = () => {
      router.push('/tickets/1')
    }
    
    const createSampleTicket = async () => {
      try {
        await ticketsStore.createTicket({
          title: '示例工单 - ' + new Date().toLocaleString(),
          description: '这是一个通过快速操作创建的示例工单',
          priority: 'medium',
          category: 'other'
        })
        ElMessage.success('示例工单创建成功！')
      } catch (error) {
        ElMessage.error('创建工单失败：' + error.message)
      }
    }
    
    const assignRandomTickets = async () => {
      try {
        const unassignedTickets = ticketsStore.tickets.filter(t => !t.assigneeId)
        if (unassignedTickets.length === 0) {
          ElMessage.info('没有未分配的工单')
          return
        }
        
        const randomTicket = unassignedTickets[Math.floor(Math.random() * unassignedTickets.length)]
        await ticketsStore.assignTicket(randomTicket.id, { id: 101, name: '技术A' })
        ElMessage.success(`工单 #${randomTicket.id} 已分配给技术A`)
      } catch (error) {
        ElMessage.error('分配工单失败：' + error.message)
      }
    }
    
    const updateRandomStatus = async () => {
      try {
        const pendingTickets = ticketsStore.tickets.filter(t => t.status === 'pending')
        if (pendingTickets.length === 0) {
          ElMessage.info('没有待处理的工单')
          return
        }
        
        const randomTicket = pendingTickets[Math.floor(Math.random() * pendingTickets.length)]
        await ticketsStore.updateTicketStatus(randomTicket.id, 'in_progress', '开始处理工单')
        ElMessage.success(`工单 #${randomTicket.id} 状态已更新为处理中`)
      } catch (error) {
        ElMessage.error('更新状态失败：' + error.message)
      }
    }
    
    const refreshStats = () => {
      ticketsStore.fetchTickets()
      ElMessage.success('统计数据已刷新')
    }
    
    onMounted(() => {
      ticketsStore.fetchTickets()
      
      // 自动切换步骤
      setInterval(() => {
        currentStep.value = (currentStep.value + 1) % 4
      }, 3000)
    })
    
    return {
      currentStep,
      stats,
      stepInstructions,
      goToList,
      goToDetail,
      createSampleTicket,
      assignRandomTickets,
      updateRandomStatus,
      refreshStats
    }
  }
}
</script>

<style scoped>
/* 现代化布局 */
.modern-layout {
  display: flex;
  min-height: 100vh;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* 侧边栏样式 */
.modern-sidebar {
  width: 280px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.sidebar-brand {
  padding: 2rem 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 1rem;
}

.brand-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.brand-text h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: #1a202c;
}

.brand-subtitle {
  font-size: 0.875rem;
  color: #718096;
  font-weight: 500;
}

.sidebar-nav {
  flex: 1;
  padding: 1.5rem 0;
}

.nav-group {
  margin-bottom: 2rem;
}

.nav-group-title {
  padding: 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #718096;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}

.nav-items {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1.5rem;
  margin: 0 0.75rem;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.nav-item:hover {
  background: rgba(102, 126, 234, 0.1);
  transform: translateX(4px);
}

.nav-item.active {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.nav-icon {
  width: 20px;
  height: 20px;
  margin-right: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-text {
  flex: 1;
  font-weight: 500;
}

.nav-badge {
  background: #ff6b6b;
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-weight: 600;
}

.nav-count {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 0.75rem;
  padding: 0.25rem 0.5rem;
  border-radius: 8px;
  font-weight: 600;
}

.sidebar-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.user-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(102, 126, 234, 0.1);
  border-radius: 12px;
}

.user-avatar {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.user-name {
  font-weight: 600;
  color: #1a202c;
  font-size: 0.875rem;
}

.user-role {
  font-size: 0.75rem;
  color: #718096;
}

/* 主容器样式 */
.main-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(20px);
  margin: 1rem;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* 顶部导航栏 */
.top-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #718096;
  font-size: 0.875rem;
}

.breadcrumb .el-icon {
  font-size: 1rem;
}

.primary-action {
  background: linear-gradient(135deg, #667eea, #764ba2);
  border: none;
  border-radius: 12px;
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  transition: all 0.2s ease;
}

.primary-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}

/* 欢迎区域 */
.welcome-section {
  padding: 3rem 2rem;
  text-align: center;
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
}

.welcome-title {
  font-size: 2.5rem;
  font-weight: 800;
  color: #1a202c;
  margin: 0 0 1rem 0;
  background: linear-gradient(135deg, #667eea, #764ba2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.welcome-subtitle {
  font-size: 1.125rem;
  color: #718096;
  margin: 0;
  font-weight: 500;
}

/* 统计网格 */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  padding: 2rem;
}

.stat-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: white;
}

.stat-icon.total {
  background: linear-gradient(135deg, #667eea, #764ba2);
}

.stat-icon.pending {
  background: linear-gradient(135deg, #f093fb, #f5576c);
}

.stat-icon.progress {
  background: linear-gradient(135deg, #4facfe, #00f2fe);
}

.stat-icon.resolved {
  background: linear-gradient(135deg, #43e97b, #38f9d7);
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: #1a202c;
  line-height: 1;
}

.stat-label {
  font-size: 0.875rem;
  color: #718096;
  font-weight: 500;
}

/* 功能特色区域 */
.features-section {
  padding: 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  font-size: 2rem;
  font-weight: 700;
  color: #1a202c;
  margin: 0 0 0.5rem 0;
}

.section-header p {
  font-size: 1rem;
  color: #718096;
  margin: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.5rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.feature-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  margin-bottom: 1rem;
}

.feature-content h3 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1a202c;
  margin: 0 0 0.75rem 0;
}

.feature-content p {
  color: #718096;
  line-height: 1.6;
  margin: 0 0 1rem 0;
}

/* 操作区域 */
.actions-section {
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.action-btn {
  height: 60px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 1rem;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* 使用说明区域 */
.instructions-section {
  padding: 2rem;
}

.steps-container {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 16px;
  padding: 2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.step-content {
  margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .modern-layout {
    flex-direction: column;
  }
  
  .modern-sidebar {
    width: 100%;
    height: auto;
  }
  
  .main-container {
    margin: 0.5rem;
  }
  
  .welcome-title {
    font-size: 2rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .features-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .actions-grid {
    grid-template-columns: 1fr;
  }
  
  .top-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }
}
</style>